<template>
    <div class="container">
        <module-title title="东阳市影视产业人力资源预警指数" :noBg="true"></module-title>
        <div class="flex">
            <div style="flex:1">
                <r-text text="群演发展预警" style="margin:28px 0 0 33px"></r-text>
                <div class="flex" style="justify-content: center;padding-top:16px">
                    <img style="width:98px;height:98px" src="../../assets/icon-circle-user.png">
                    <div style="color:#FFF;text-align:left;padding-left:20px">
                        累计注册群演与去年同期比
                        <div class="value" style="font-size:32px;color:#FFF">{{data.value1}}<span class="unit" style="opacity:1">%</span></div>
                    </div>
                </div>
                <div ref="dialgChart3" style="height:230px"></div>
            </div>
            <div style="flex:1">
                <r-text text="产业从业人员发展预警" style="margin:28px 0 0 33px"></r-text>
                <div class="flex" style="justify-content: center;padding-top:16px">
                    <img style="width:98px;height:98px" src="../../assets/icon-circle-cor.png">
                    <div style="color:#FFF;text-align:left;padding-left:20px">
                        每家企业拥有从业人员数占去年年底值的比例
                        <div class="value" style="font-size:32px;color:#FFF">{{data.value2}}<span class="unit" style="opacity:1">%</span></div>
                    </div>
                </div>
                <div ref="dialgChart4" style="height:230px"></div>
            </div>
        </div>
    </div>
</template>
<script>
import ModuleTitle from '../ModuleTitle.vue'
import RText from '../RText.vue'
import * as echarts from 'echarts';
export default {
    components: { ModuleTitle, RText },
    props: {
        data: Object
    },
    data() {
        return {
            chart1: null,
            chart2: null
        }
    },
    watch: {
        data: {
            handler() {
                this.$nextTick(() => {
                    this.showChart(this.chart1, 'dialgChart3', this.getOption1())
                    this.showChart(this.chart2, 'dialgChart4', this.getOption2())
                })
            },
            immediate: false,
            deep: true
        }
    },
    methods: {
        update() {
            this.showChart(this.chart1, 'dialgChart3', this.getOption1())
            this.showChart(this.chart2, 'dialgChart4', this.getOption2())
        },
        showChart(instance, id, option) {
            if (!instance) {
                instance = echarts.init(this.$refs[id]);
            }
            this.$refs[id].setAttribute('_echarts_instance_','')
            instance.setOption(option);
            this.$forceUpdate();
        },
        getOption1() {
            let serie = {
                type: 'line',
            }
            return {
                grid: {
                    bottom: 42,
                    top: 40,
                    left: 58,
                    right: 30
                },
                // tooltip: this.getTooltipItem(),
                colors: ['#0884FF', '#64E6E2', '#FFA00A'],
                legend: {
                    textStyle: {
                        color: '#FFF',
                        fontSize: 14
                    },
                    // right: 24,

                    right: 30
                },
                xAxis: {
                    data: this.data.list1.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},

                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },
                   
                    axisLine: {
                        lineStyle: {
                            color: '#36525E',
                        }
                    },
                    nameGap: 10
                },
                yAxis:[{
                    name: '人',
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 14,
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {color: '#36525E',}
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#36525E',
                        }
                    },
                }],
                 series:[{
                    name: this.data.legend1[0],
                    data: this.data.list1.map(e => e.value1),
                    yAxisIndex: 0,
                    lineStyle: {color: 'rgba(8,132,255,1)'},
                
                    ...serie
                },{
                    name: this.data.legend1[1],
                    data: this.data.list1.map(e => e.value2),
                    yAxisIndex: 0,
                    lineStyle: {color: 'rgba(100,230,226,1)'},

                    ...serie
                }]
                
            }
        },
        getOption2() {
            let serie = {
                type: 'line',
            }
            return {
                grid: {
                    bottom: 42,
                    top: 40,
                    left: 58,
                    right: 30
                },
                // tooltip: this.getTooltipItem(),
                colors: ['#0884FF', '#64E6E2', '#FFA00A'],
                legend: {
                    textStyle: {
                        color: '#FFF',
                        fontSize: 14
                    },
                    // right: 24,

                    right: 30
                },
                xAxis: {
                    data: this.data.list2.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},

                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },
                   
                    axisLine: {
                        lineStyle: {
                            color: '#36525E',
                        }
                    },
                    nameGap: 10
                },
                yAxis:[{
                    name: '人',
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 14,
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {color: '#36525E',}
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#36525E',
                        }
                    },
                }],
                 series:[{
                    name: this.data.legend2[0],
                    data: this.data.list2.map(e => e.value1),
                    yAxisIndex: 0,
                    lineStyle: {color: 'rgba(255, 160, 10, 1)'},
                
                    ...serie
                },{
                    type: 'bar',
                    name: this.data.legend2[1],
                    data: this.data.list2.map(e => e.value2),
                    yAxisIndex: 0,
                    barWidth: 14,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y:1,
                            colorStops:[{
                                offset: 0, color: 'rgba(8, 132, 255, 0)'
                            },{
                                offset: 1, color: 'rgba(8, 132, 255, 1)'
                            }]
                        }
                    }
                }]
                
            }
        }
    }
    
}
</script>
<style lang="less" scoped>
.container {
    background: linear-gradient(360deg, rgba(8, 132, 255, 0) 0%, rgba(8, 132, 255, 0.12) 100%);
}
.flex {
    display: flex;
    align-items: center;
    
}
</style>